import React, { PureComponent } from 'react';
import { Modal, Form, Input, Select, InputNumber } from 'antd';

const { Option } = Select;
const FormItem = Form.Item
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
}
class roleModal extends PureComponent {


    handleOk = () => {
        const { modal = {}, handleOk, form } = this.props
        const { validateFields, getFieldsValue } = form
        validateFields(errors => {
            if (errors) {
                return
            }
            const data = {
                res: {
                    id: modal.id || new Date().getTime(),
                    ...getFieldsValue(),
                    createTime: modal.createTime || new Date().getTime()
                },
                fun: Object.keys(modal).length > 0 ? 'upDate' : 'add'
            }
            console.log('表单', data)
            handleOk(data)
        })
    };

    render() {
        const { visible, confirmLoading, modal, showModal, form } = this.props;
        const { getFieldDecorator } = form
        return (
            <div>
                <Modal
                    title={Object.keys(modal).length > 0 ? '修改' : '新增'}
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={showModal}
                >
                    <Form layout="horizontal">
                        <FormItem label='订单号' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('order_code', {
                                initialValue: modal.order_code,
                                rules: [
                                    {
                                        required: true,
                                    }
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='名称' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('name', {
                                initialValue: modal.name,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='手机号' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('phone', {
                                initialValue: modal.phone,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<InputNumber />)}
                        </FormItem>
                        <FormItem label='地址' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('address', {
                                initialValue: modal.address,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='商品价格' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('price', {
                                initialValue: modal.price,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<InputNumber />)}
                        </FormItem>
                        <FormItem label='状态' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('order_state', {
                                initialValue: modal.order_state,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Select>
                                <Option value={0}>代发货</Option>
                                <Option value={1}>待收货</Option>
                                <Option value={2}>退货中</Option>
                                <Option value={3}>已完成</Option>
                            </Select>)}
                        </FormItem>
                        <FormItem label='快递' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('express_company', {
                                initialValue: modal.express_company,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Select>
                                <Option value='韵达'>韵达</Option>
                                <Option value='天天'>天天</Option>
                                <Option value='顺丰'>顺丰</Option>
                                <Option value='邮政'>邮政</Option>
                            </Select>)}
                        </FormItem>
                        <FormItem label='运费' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('freight', {
                                initialValue: modal.freight,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<InputNumber />)}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

roleModal = Form.create({
    mapPropsToFields(props) {
        const { modal } = props;
        const { createFormField } = Form
        return {
            order_code: createFormField(modal.order_code),
            name: createFormField(modal.name),
            phone: createFormField(modal.phone),
            address: createFormField(modal.address),
            price: createFormField(modal.price),
            order_state: createFormField(modal.order_state),
            express_company: createFormField(modal.express_company),
            freight: createFormField(modal.freight)
        };
    }
})(roleModal);

export default roleModal